<!-- src/components/DiscussionTab.vue -->
<template>
  <div class="discussion-tab">
    <div class="discussion-header">
      <h3>薪酬讨论</h3>
      <p>关于{{ companyName }}的薪酬待遇，大家有什么看法？</p>
    </div>
    <div class="discussion-list">
      <div v-for="item in discussionList" :key="item.id" class="discussion-item">
        <div class="user-info">
          <div class="avatar"></div>
          <div class="username">{{ item.user.full_name || '匿名用户' }}</div>
        </div>
        <div class="comment-content">
          <h4>{{ item.title }}</h4>
          <p>职级：{{ item.level.level_name }} ({{ item.level.level_code }})</p>
          <p>部门：{{ item.department }}</p>
          <p>基本月薪：¥{{ formatNumber(item.base_monthly_comp) }}</p>
          <p>年终奖：¥{{ formatNumber(item.bonus_comp) }}</p>
          <p>股票：¥{{ formatNumber(item.stock_comp) }}</p>
          <p>总年薪：¥{{ formatNumber(item.total_comp) }}</p>
        </div>
        <div class="comment-meta">{{ formatDate(item.created_at) }}</div>
      </div>
      <div v-if="discussionList.length === 0 && !loading" class="no-data">暂无薪酬讨论数据</div>
      <div v-if="loading" class="loading">加载中...</div>
    </div>
    
    <!-- 分页组件 -->
    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        background
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { ElPagination } from 'element-plus';
import { SalariesdataApi } from '@/utils/api';

const props = defineProps({
  companyId: {
    type: String,
    required: true
  },
  companyName: {
    type: String,
    default: '小红书'
  }
});

// 数据相关
const discussionList = ref([]);
const loading = ref(false);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const formatNumber = (num) => {
  if (num >= 10000) return (num / 10000).toFixed(1) + '万';
  return num.toLocaleString();
};

const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleDateString('zh-CN');
};

// 获取薪酬讨论数据
const fetchSalaryDiscussionData = async (page = 1) => {
  if (!props.companyId) return;
  
  loading.value = true;
  try {
    const response = await SalariesdataApi.getSalaryByCompanyId(props.companyId, {
      skip: (page - 1) * pageSize.value,
      limit: pageSize.value
    });
    
    discussionList.value = response.data || [];
    total.value = response.count || 0;
    currentPage.value = page;
  } catch (error) {
    console.error('获取薪酬讨论数据失败:', error);
    discussionList.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 处理分页变化
const handlePageChange = (page) => {
  fetchSalaryDiscussionData(page);
};

// 监听companyId变化
watch(() => props.companyId, (newId) => {
  if (newId) {
    fetchSalaryDiscussionData(1);
  }
});

// 组件挂载时获取数据
onMounted(() => {
  fetchSalaryDiscussionData(1);
});
</script>

<style scoped>
.discussion-tab {
  padding: 20px;
}

.discussion-header h3 {
  margin-top: 0;
  color: #333;
}

.discussion-header p {
  color: #666;
  margin-bottom: 20px;
}

.discussion-item {
  border: 1px solid #ebeef5;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  background-color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f0f0;
  margin-right: 10px;
}

.username {
  font-weight: bold;
  color: #333;
}

.comment-content h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.comment-content p {
  margin: 5px 0;
  color: #666;
}

.comment-meta {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
  text-align: right;
}

.no-data, .loading {
  text-align: center;
  color: #999;
  padding: 40px 0;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>